<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
		</script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.dimensions.js">
		</script>
		<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js">
		</script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('form#input').submit(function() {
					var name = $('input[name=username]').val();
					if(name == ''){
						alert("No name introduced");
						return false;
					}
					$.ajax({
						data: "consulta="+name,
						type: "GET",
						dataType: "json",	
						url: "prueba.php",
						success: function(data){
							if(data != null){
								$("form#input").html(data);
								$("#busqueda").hide();
								$("#busquedaAvanzada").hide();
							}
							else{
								alert("No results found");
							}
						}
					})
					return false;
				});
				$('input[name=username]').focus(function(){
					if(this.value = this.defaultValue){
						this.value = '';	
					}
				})
				$('#busqueda').click(function(){
					$('#busqueda').hide();
					$('#busquedaAvanzada').show();
				})
				$('#busquedaSencilla').click(function(){
					$('#busquedaAvanzada').hide();
					$('#busqueda').show();
				})
				$('#desde').combobox();
				$('#hasta').combobox();
			});
		</script>
		<style type="text/css"> 
			#busquedaAvanzada{ display: none; } 
		</style>
	</head>
	<body>
		<h1>It works!</h1>
		<div id="contact_form"> 
		<form id="input" action="" method="get">
		Username: <input type="text" id="username" name="username" value="Busca aqui tu serie" />
		<input type="submit" name="Submit" class="button" id="submit_btn" value="Submit" />
		<br /><input id="busqueda" type="button" value="Busqueda Avanzada" />
		</form>
		<form id="busquedaAvanzada">
			Genero<input type="checkbox" id="genero"/><br />
			Desde:<select id="desde">
					<option value="2000">2000</option>
					<option value="1990">1990</option>
					<option value="1980">1980</option>
					<option value="1970">1970</option>
				</select>
			Hasta:<select id="hasta">
					<option value="2010">2010</option>
					<option value="2000">2000</option>
					<option value="1990">1990</option>
					<option value="1980">1980</option>
				</select>	
				<br /><input id="busquedaSencilla" type="button" value="Busqueda Sencilla" />
		</form>
		</div>
	</body>
</html>
